<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB-BLE</title>
    <style>
        body {
            background-color: gray;
        }

        h1 {
            width: 100%;
            text-align: center;
        }

        button {
            margin-left: 20%;
            margin-right: 20%;
            width: 60%;
            height: 6rem;
        }
    </style>
</head>

<body>
    <h1>BLE调试</h1>
    <button onclick="connect()">连接设备</button>
    <button onclick="turn_on()">打开风扇</button>
    <button onclick="turn_off()">关闭风扇</button>
    <button onclick="led_on()">打开灯光</button>
    <button onclick="led_off()">关闭灯光</button>
    <button onclick="disconnect()">断开连接</button>
</body>

<script>
    let characteristicTX;
    let characteristicRX;
    let DEVICE;
    let option = {
        acceptAllDevices: true,
        optionalServices: ['6e400001-b5a3-f393-e0a9-e50e24dcca9e']
    }
    //连接设备
    function connect() {
        navigator.bluetooth.requestDevice(option).then(device => {
            DEVICE = device;
            return device.gatt.connect()//连接设备
        }).then(server => {
            return server.getPrimaryService('6e400001-b5a3-f393-e0a9-e50e24dcca9e')//获取服务
        }).then(service => {
            /*获取特征*/
            service.getCharacteristic('6e400002-b5a3-f393-e0a9-e50e24dcca9e').then(characteristic => {
                characteristicRX = characteristic;
                // console.log(characteristicRX)
            })
            service.getCharacteristic('6e400003-b5a3-f393-e0a9-e50e24dcca9e').then(characteristic => {
                characteristicTX = characteristic;
                // console.log(characteristicTX)
                //订阅设备消息
                characteristicTX.startNotifications().then(() => {
                    console.log("开启通知");
                    characteristicTX.addEventListener('characteristicvaluechanged',
                        handleNotifications);
                })
            })
            console.log("设备连接成功!");
            alert("设备已连接!")
            alter
        }).catch(error => {
            console.error("连接设备:" + error)
        })
    }
    //订阅设备消息回调函数
    const decoder = new TextDecoder('utf-8');
    function handleNotifications(event) {
        let value = event.target.value
        console.log(decoder.decode(value));
    }
    //打开风扇
    function turn_on() {
        if (!DEVICE) {
            console.error("设备未连接!");
            alert("设备未连接!")
            return;
        }
        let stringToWrite = "1";
        let encoder = new TextEncoder();
        let data = encoder.encode(stringToWrite);
        characteristicRX.writeValue(data);
        console.log("打开风扇")
    }
    //关闭风扇
    function turn_off() {
        if (!DEVICE) {
            console.error("设备未连接!");
            alert("设备未连接!")
            return;
        }
        let stringToWrite = "0";
        let encoder = new TextEncoder();
        let data = encoder.encode(stringToWrite);
        characteristicRX.writeValue(data);
        console.log("关闭风扇")
    }
    //打开灯光
    function led_on() {
        if (!DEVICE) {
            console.error("设备未连接!");
            alert("设备未连接!")
            return;
        }
        let stringToWrite = "2";
        let encoder = new TextEncoder();
        let data = encoder.encode(stringToWrite);
        characteristicRX.writeValue(data);
        console.log("关闭灯光")
    }
    //关闭灯光
    function led_off() {
        if (!DEVICE) {
            console.error("设备未连接!");
            alert("设备未连接!")
            return;
        }
        let stringToWrite = "3";
        let encoder = new TextEncoder();
        let data = encoder.encode(stringToWrite);
        characteristicRX.writeValue(data);
        console.log("关闭灯光")
    }
    //断开连接
    function disconnect() {
        if (!DEVICE) {
            console.error("设备未连接!");
            alert("设备未连接!")
            return;
        }
        DEVICE.gatt.disconnect()
        DEVICE = null;
        console.log("断开连接!")
        alert("设备已断开!")
    }
</script>

</html>